<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <div id="app">      
        <!-- 1、定义一个只读的计算属性 -->
        <p>count:{{count}}</p>
        <p>doubleCount：{{doubleCount}}</p>
        <input type="button" value="修改count" @click="changeCount" >
        <hr/>
        <!--  2、定义一个可读写的计算属性 -->

        <p>age:{{age}}</p>
        <p>wifeAge:{{wifeAge}}</p>
        <input type="button" value="修改age" @click="changeAge" >
        <input type="button" value="修改wifeAge" @click="changeWifeAge" >       

    </div>
</body>
</html>

<script src="./js/vue.global.js"></script>
<script>    

     const {createApp,ref,reactive,computed} = Vue;

    let app = createApp({
        setup(){

            // 1、定义一个只读的计算属性
            let count = ref(5);

            // 定义一个计算属性：
            let doubleCount = computed(()=>count.value*count.value);

            function changeCount(){
                count.value ++;
            }

            // 2、定义一个可读写的计算属性

            let age = ref(20);

            let wifeAge = computed({
                set:function(newVal){
                    console.log("newVal",newVal);
                    age.value = newVal-3;
                },
                get:function(){
                   return age.value+3 
                }
            })

            function changeAge(){
                age.value--;
            }
            
            function changeWifeAge(){
                wifeAge.value--;
            }

            return {
                count,doubleCount,changeCount,
                age,wifeAge,changeAge,changeWifeAge
            }
        }
    })

    app.mount("#app");

</script>